<template>
  <div v-if="!editting">
    <div class="edit_line">
      <div class="edit_label">
        分权引用
      </div>
      <div class="edit_value">
        {{fqyyFlag}}
      </div>
    </div>
    <div class="edit_line">
      <div class="edit_label">
        无分权引用流程数
      </div>
      <div class="edit_value">
        {{noFqyySum}}
      </div>
    </div>
    <div class="edit_line">
      <div class="edit_label">
        无分权引用占比
      </div>
      <div class="edit_value">
        {{noFqyyRatio}}%
      </div>
    </div>
    <div class="edit_line" v-if="fqyyFlag == '有'">
      <div class="edit_label">
        引用明细
      </div>
      <div class="edit_value">
        {{fqyyMsg}}
      </div>
    </div>
  </div>
  <div v-else>
    <div class="edit_line">
      <div class="edit_label">
        <span class="edit_important">*</span>
        分权引用
      </div>
      <div class="edit_value">
        <checklist :options="commonList" :max="1" v-model="fqyyFlag1" @on-change="change"></checklist>
      </div>
    </div>
    <div class="edit_line">
      <div class="edit_label">
        无分权引用流程数
      </div>
      <div class="edit_value">
        {{noFqyySum}}
      </div>
    </div>
    <div class="edit_line">
      <div class="edit_label">
        无分权引用占比
      </div>
      <div class="edit_value">
        {{noFqyyRatio}}%
      </div>
    </div>
    <div class="edit_line" v-if="fqyyFlag1 == '有'">
      <div class="edit_label">
        <span class="edit_important">*</span>
        引用明细
      </div>
      <div class="edit_value">
        <textarea style="width:100%" placeholder="请在这里输入..." rows="5" v-model="fqyyMsg1"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
  import { Checklist } from 'vux'
  export default {
    name: 'fqyy-line',
    components:{
      Checklist
    },
    props: {
      label: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'text'
      },
      placeholder: {
        type: String,
        default: '请在此输入'
      },
      important: {
        type: Boolean,
        default: false
      },
      editting: {
        type: Boolean,
        default: true
      },
      fqyyFlag: {//分权标识
        type:String,
        default: '无'
      },
      noFqyySum: {//分权流程总数
        type:String,
        default: '0'
      },
      noFqyyRatio: {//分权占比
        type:String,
        default: '0'
      },
      fqyyMsg: {//分权明细
        type:String,
        default: ' '
      }
    },
    data() {
      return {
        commonList:['有','无'],
        fqyyMsg1:'',
        fqyyFlag1:['有']
      }
    },
    methods:{
      onTap(){
      },
      change(val, label) {
        this.fqyyFlag1 = label;
      }
    },
    mounted(){
     
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  
  .edit_line {
    width: 100%;
    padding: 7px 0;
    line-height: 26px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    position: relative;
    .edit_label {
      width: 36%;
      text-align: right;
      float: left;
      padding-right: 10px;
      .edit_important {
        width: 10px;
        color: red;
      }
    }
    .edit_value {
      width: 64%;
      float: left;
      font-size: 14px;
      text-align: left;
      color: #2c3e50;
      input {
        width: 100%;
        font-size: 14px;
        padding-left: 15px;
        color: #2c3e50;
      }
    }
    .show_value {
      width: 64%;
      float: left;
      text-align: left;
    }
    .edit_select-control {
      flex: 3;
      text-align: left;
    }
    .edit_date-control {
      flex: 3;
      text-align: left;
    }
  }
</style>
